<template>
  <div class="task-list">
    <div class="task-list-header">
      <h2>任务列表</h2>
      <el-button type="primary" @click="$router.push('/task/new')">
        <el-icon><Plus /></el-icon>新建任务
      </el-button>
    </div>

    <div class="task-list-filter">
      <el-select v-model="filterStatus" placeholder="按状态筛选" clearable>
        <el-option label="全部" value="" />
        <el-option label="待处理" value="pending" />
        <el-option label="进行中" value="in_progress" />
        <el-option label="已完成" value="completed" />
        <el-option label="失败" value="failed" />
      </el-select>
    </div>

    <el-table
      v-loading="taskStore.loading"
      :data="filteredTasks"
      style="width: 100%"
    >
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间">
        <template #default="{ row }">
          {{ formatDate(row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button-group>
            <el-button
              type="primary"
              size="small"
              @click="$router.push(`/task/${row.id}/edit`)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(row.id)"
            >
              删除
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { useTaskStore } from '../store/task'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const taskStore = useTaskStore()
const filterStatus = ref('')

onMounted(() => {
  taskStore.fetchTasks()
})

const filteredTasks = computed(() => {
  if (!filterStatus.value) {
    return taskStore.tasks
  }
  return taskStore.tasks.filter(task => task.status === filterStatus.value)
})

const getStatusType = (status) => {
  const types = {
    pending: 'info',
    in_progress: 'warning',
    completed: 'success',
    failed: 'danger'
  }
  return types[status] || 'info'
}

const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除这个任务吗？', '警告', {
      type: 'warning'
    })
    await taskStore.deleteTask(id)
    ElMessage.success('删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}
</script>

<style scoped>
.task-list {
  padding: 20px;
}

.task-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.task-list-filter {
  margin-bottom: 20px;
}
</style> 